<template>
  <div class="app-container">
    <el-row class="content-container">
      <div class="left">
        <el-select
          v-model="reqData.courseId"
          style="width:200px"
          filterable
          remote
          reserve-keyword
          placeholder="请输入课程名字"
          :remote-method="querySearchAsync"
          :loading="loading"
        >
          <el-option
            v-for="item in courseOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-input style="width: 200px;" v-model="reqData.deptName" placeholder="部门"></el-input>
        <el-select v-model="reqData.certificateStatus" placeholder="证书查询" style="width:200px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="exportList">导出</el-button>
      </div>
    </el-row>
    <el-table :data="courseArray" style="width: 100%">
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="mobile" label="账号"></el-table-column>
      <el-table-column prop="deptName" label="部门"></el-table-column>
      <el-table-column prop="courseName" label="学习课程"></el-table-column>
      <el-table-column prop="updateTime" label="开通日期"></el-table-column>
      <el-table-column prop="authTime" label="到期日期"></el-table-column>
      <el-table-column prop="totalMinute" label="课程总时长(分钟)"></el-table-column>
      <el-table-column prop="studyMinute" label="已学习总时长(分钟)"></el-table-column>
      <el-table-column prop="totalChapterNum" label="总章节数"></el-table-column>
      <el-table-column prop="finishChapterNum" label="已完成章节数"></el-table-column>

      <el-table-column label="学习进度">
        <template slot-scope="scope">
          <el-progress :percentage="parseInt(scope.row.completionRatio)"></el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="考试分数"></el-table-column>
      <!-- <el-table-column prop="score" label="补考分数"></el-table-column> -->
      <el-table-column prop="certificateStatus" label="证书">
        <template slot-scope="scope">
          <span>{{ scope.row.certificateStatus?'已获得':'未获得'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalResultSize"
        :current-page="reqData.currentPage"
        :page-count="totalPageSize"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="reqData.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getComanyId } from "@/utils/auth";
import {
  getStudyDetail,
  getCourseList,
  exportStudyDetail
} from "@/api/statistics";
export default {
  name: "studyInfo",
  data() {
    return {
      courseArray: [],
      options: [
        {
          value: "1",
          label: "已获得"
        },
        {
          value: "0",
          label: "未获得"
        }
      ],
      reqData: {
        pageSize: 10,
        currentPage: 1,
        certificateStatus: "",
        courseId: "",
        deptName: "",
        companyId: ""
      },
      reqCourseData: {
        sellType: "VIDEO",
        name: ""
      },
      totalPageSize: 0,
      totalResultSize: 0,
      loading: false,
      courseOptions: [] //搜索课程数组
    };
  },
  created() {
    this.reqData.companyId = getComanyId();
    this.getList(this.reqData);
  },
  methods: {
    getList(data) {
      getStudyDetail(data).then(res => {
        let entity = res.entity;
        this.courseArray = [...entity.data];
        this.totalPageSize = entity.page.totalPageSize;
        this.totalResultSize = entity.page.totalResultSize;
      });
    },
    querySearchAsync(query) {
      let results = [];
      //搜索课程
      this.reqCourseData.name = query;
      if (query !== "") {
        this.loading = true;
        getCourseList(this.reqCourseData).then(res => {
          this.loading = false;
          this.courseOptions = [...res.entity.data];
        });
      } else {
        this.courseOptions = [];
      }
    },
    search() {
      this.reqData.currentPage = 1;
      this.getList(this.reqData);
    },
    exportList() {
        //导出列表
      let exportUrl =
        "http://emp_new.quality-in.com/admin/statistics/exportStudyDetail?token="+getToken()+'&';
      let reqData = this.reqData;
      Object.keys(reqData).map(key => {
        exportUrl += key + "=" + reqData[key] + "&";
      });
      exportUrl = exportUrl.substring(0, exportUrl.length - 1);
      window.open(exportUrl);
    },
    handleSizeChange(val) {
      this.reqData["pageSize"] = val;
      this.reqData.currentPage = 1;
      this.getList(this.reqData);
    },
    handleCurrentChange(val) {
      this.reqData.currentPage = val;
      this.getList(this.reqData);
    }
  }
};
</script>

<style scoped>
.mask {
  width: 100%;
  min-height: 100%;
  z-index: 10;
  position: fixed;
  top: 0;
}

.posit-contont {
  position: relative;
  display: inline-block;
}

.posit-tree {
  position: absolute;
  right: 0;
  top: 40px;
  background: #fff;
  border: 1px solid #dfe6ec;
  z-index: 100;
  width: 200px;
  height: 350px;
  overflow-y: auto;
}

.el-tree {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #dfe6ec;
  border-top: none;
}
</style>